<template>
	<view class="page">
		<view class="title">
			2.4.image媒体组件属性配合swiper轮播
		</view>
		<view class="">
			官网链接API
			<uni-link href="https://uniapp.dcloud.net.cn/component/image.html" text="view" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/2.jpg" mode="widthFix" class="img">
			</image>
		</view>
		<view class="red-bg">
			一个小BUG view 包裹 img标签时候，因为image是行内块元素，所有要给图片标签设置一个 vertical-align: middle 属性即可不再显示多余部分。
		</view>
		<view class="">
			<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/images-bug.png" mode="widthFix"
				class="img"></image>
		</view>
		<view class="p">
			我的日常做法是图片加上class="img" 并且在公用的css里面加上 .img{vertical-align: middle}
		</view>
		<view class="p">
			图片不设置宽高时候默认是320*240 并且作为内连元素（inline-block）显示。
		</view>
		<view class="p">
			mode 有 14 种模式，其中 5 种是缩放模式，详情见API。假如图片的尺寸为1575*985，并且不设置图片宽高的情况下，默认图片区域的大小为 320*240
		</view>
		<view class="p">
			<text class="red">
				aspectFill 模式 （保证图片的短边能完全显示）
			</text>
		</view>
		<view class="p">
			<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/aspectFill.png" mode="widthFix"></image>
		</view>
		<view class="p">
			<text class="red">
				widthFix 模式 （宽度不变，高度自动变化，保持原图宽高比不变）
			</text>
		</view>
		<view class="p bold">
			设置高度就没有用了，会按照宽度撑起来父级DIV中的所有宽度，高度自适应
		</view>
		<view class="p">
			<text class="blue">
				scaleToFill 模式 （不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素）
			</text>
		</view>
		<view class="p">
			如果父级div或者图片的设置宽高刚好是原图比例，则正常显示。如果非原图的比例，就会导致图片变形。
			<image src="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/2.jpg" mode="scaleToFill"></image>
		</view>
		<view class="h4">
			lazy-load图片懒加载，此属性在小程序里面可以很大程度上的减少网络资源加载，只针对page与scroll-view下的image有效
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
</script>

<style lang="scss" scoped>

</style>